import React, { useEffect, useState } from 'react'
import './grbk.css'
import { Button, Input, Select, DatePicker, Pagination, Modal, Radio } from 'antd';
import { PlusCircleOutlined, DownloadOutlined, EditOutlined } from '@ant-design/icons';
import { getList, getprepar1, editInstance } from '../request/instance'
const App = function () {
    let [page, setpage] = useState(1)
    let [pageSize, setpageSize] = useState(5)
    let [grade, setgrade] = useState([])
    let [discipline, setdiscipline] = useState([])
    let [prepar, setprepar] = useState([])
    let [total, settotal] = useState('')
    let [name, setname] = useState('')//搜索备课名称
    let [teacher, setteacher] = useState('')//搜索教师名称
    let [bktype, setbktype] = useState('')//搜索备课类型
    let [discipline1, setdiscipline1] = useState('')//搜索学科
    let [grade1, setgrade1] = useState('')//搜索年级
    const [isModalOpen,setIsModalOpen]=useState(false)
    let [obj, setobj] = useState({})
    const chongzhi = () => {//重置按钮事件
        setname('')//备课名称
        setteacher('')//教师名称
        setbktype('')//备课类型
        setdiscipline1('')//学科
        setgrade1('')//年级
        getprepar1().then((ren) => {
            setprepar(ren.data.prepar)
            settotal(ren.data.total)
        })
    }
    useEffect(() => {
        getList().then((ren) => {
            let d = []
            let c = []
            ren.data.discipline.forEach(i => {
                c.push({ 'value': i.discipline, 'label': i.discipline })
            });
            ren.data.grade.forEach(i => {
                d.push({ 'value': i.grade, 'label': i.grade })
            });
            setdiscipline(c)
            setgrade(d)
        })
    }, [])
    useEffect(() => {
        getprepar1().then((ren) => {
            setprepar(ren.data.prepar)
            settotal(ren.data.total)
        })
    }, [])
    const getp = () => {
        setpage(1)
        getprepar1({ name, teacher, bktype, "discipline": discipline1, "grade": grade1, page, pageSize }).then((ren) => {
            setprepar(ren.data.prepar)
            settotal(ren.data.total)
        })
    }
    return <>
        <div className='main'>
            <div className='top'>
                <div>
                    <span>备课名称 <Input style={{ width: '160px' }} placeholder="输入备课组名称" value={name}
                        onInput={(e) => { setname(e.target.value) }} /></span>
                    <span>教师姓名 <Input style={{ width: '160px' }} placeholder="输入备课组组长" value={teacher}
                        onInput={(e) => { setteacher(e.target.value) }} /></span>
                    <span>备课类型 <Select style={{ width: '160px' }} value={bktype}
                        onChange={(e) => {
                            setbktype(e);
                        }}
                        options={[
                            {
                                value: '教案',
                                label: '教案',
                            }, {
                                value: '导学案',
                                label: '导学案',
                            }, {
                                value: '课件',
                                label: '课件',
                            },
                        ]}
                    /></span>
                    <span>学科 <Select style={{ width: '160px' }} value={discipline1}
                        onChange={(e) => {
                            setdiscipline1(e);
                        }}
                        placeholder="请选择学科"
                        options={discipline}
                    /></span>
                    <span>年级 <Select style={{ width: '160px' }} value={grade1}
                        onChange={(e) => {
                            setgrade1(e);
                        }}
                        placeholder="请选择年级"
                        options={grade}
                    /></span>
                </div>
                
                <hr style={{ width: '98%', color: 'rgb(237, 237, 237)' }} />
                <div className='button'>
                    <Button type="primary" onClick={() => { getp() }}>查询</Button>
                    <Button color="primary" variant="outlined" onClick={chongzhi}>重置</Button>
                </div>
            </div>
            <div className='box'>
                <div>
                    <div className='box_div1'>
                        <Button type="link" icon={<PlusCircleOutlined />}>新增实例</Button>
                    </div>
                </div>
                <table width='1100px' border='1px' style={{}} cellSpacing='0'>
                    <thead>
                        <tr>
                            <td>序号</td>
                            <td>备课名称</td>
                            <td>教师名称</td>
                            <td>备课类型</td>
                            <td>学科</td>
                            <td>年级</td>
                            <td>册次</td>
                            <td>章节</td>
                            <td>来源</td>
                            <td>操作</td>
                        </tr>
                    </thead>
                    <tbody>
                        {prepar.map((i, index) => <tr key={i._id}>
                            <td>{index + 1}</td>
                            <td>{i.name}</td>
                            <td>{i.teacher}</td>
                            <td>{i.bktype}</td>
                            <td>{i.discipline}</td>
                            <td>{i.grade}{i.semester}</td>
                            <td>{i.volume}</td>
                            <td>{i.course}</td>
                            <td>{i.source?i.source:'未知'}
                            </td>
                            <td>
                                
                                <Button type="link" onClick={() => {
                                    setIsModalOpen(true)
                                    setobj(i)

                                }}>查看</Button>
                                {i.instance && <Button type="link" onClick={() => {
                                    editInstance({ id: i._id, instance: false }).then(ren => {
                                        getp()
                                    })
                                }}>删除实例</Button>}
                            </td>
                        </tr>)}
                    </tbody>
                </table>
                <Pagination
                    total={total}
                    showTotal={(total) => `共 ${total} 条`}
                    defaultPageSize={pageSize}
                    defaultCurrent={page}
                    onChange={(e) => {
                        console.log(e);
                    }}
                />
            </div>
            <Modal title={obj.name} width="800px"
                open={isModalOpen} onOk={() => { setIsModalOpen(false) }} okText='知道了' closable={false}
                onCancel={() => { setIsModalOpen(false) }} cancelText='取消'>
                {obj.instance && <p style={{ display: 'flex', justifyContent: 'right' }}>
                    <Button type='link' onClick={() => {
                        editInstance({ id: obj._id, instance: false }).then(ren => {
                            setIsModalOpen(false)
                            getp()
                        })
                    }}>删除实例</Button>
                </p>}
                {obj.file && <img src={obj.file} alt="" width="700px" height="400px" />}
                <p>教师：{obj.teacher}</p>
                <p>学科：{obj.discipline}</p>
                <p>版本：{obj.version}</p>
                <p>任教年级：{obj.grade}{obj.semester}</p>
                <p>教学章节：{obj.course}</p>
                <p>涉及知识点：{obj.knowledge}</p>
                <p>备课质量：{obj.quality}</p>
                <p>备课时间：{obj.data}</p>
                <p>审核结果：{obj.audit}</p>
                <p>来源：{obj.source ? obj.source : '未知'}</p>
            </Modal>
        </div>
    </>
}

export default React.memo(App);